<div id="app">
  <button @click="isShow=!isShow">Toggle</button>
  <p v-if="isShow">v-if content</p>
  <p v-show="isShow">v-show content</p>
  <child v-if="isShow" title="v-if"></child>
  <child v-show="isShow" title="v-show"></child>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() {
      return { isShow: true }
    }
  })
  app.component('child', {
    props: ['title'],
    template: `<div>component {{title}}</div>`,
    created() {
      console.log('child created', this.title)
    },
    unmounted() {
      console.log('child unmounted', this.title)
    }
  })
  app.mount('#app')
</script>
